<template>
  <div>
    <t-popup
      style="width: 95%"
      v-model="showPopup"
      placement="center"
      :destroy-on-close="true"
      :round="true"
      @closed="closehide"
    >
      <div class="popup-content">
        <div class="proptitle">督课{{ endtext || "新增" }}</div>
        <div class="form-content">
          <t-form
            :inline="inline"
            :data="formData"
            :rules="rules"
            ref="rulesForm" 
            label-position="right"
          >
            <t-form-item
              label="省："
              label-width="170"
              prop="province"
              name="province"
              
            >
              <t-input
                v-model.trim="formData.province"
                maxlength="60"
                clearable
                :disabled="authority([5])" 
                borderless
                align="right"
                placeholder="请填写所在省份"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="市："
              label-width="170"
              prop="municipality"
              name="municipality"
            >
              <t-input
                v-model.trim="formData.municipality"
                maxlength="60"
                borderless
                clearable
                :disabled="authority([5])" 
                
                align="right"
                placeholder="请输入市名称"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="区："
              label-width="170"
              prop="region"
              name="region"
            >
              <t-input
                v-model.trim="formData.region"
                maxlength="60"
                clearable
                borderless
                :disabled="authority([5])" 
                
                align="right"
                placeholder="请输入区名称"
                style="width: 200px"
              ></t-input>
            </t-form-item>

            <t-form-item
              label="所属机构："
              label-width="170"
              prop="institution"
              name="institution"
            >
              <t-input
                v-model.trim="formData.institution"
                maxlength="60"
                clearable
                borderless
                :disabled="authority([5])" 
                
                align="right"
                placeholder="请输入所属机构"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="学校名称："
              label-width="170"
              prop="school_name"
              name="school_name"
            >
              <t-input
                v-model.trim="formData.school_name"
                maxlength="60"
                clearable
                borderless
                :disabled="authority([5])" 
                
                align="right"
                placeholder="请输入学校名称"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="年级："
              label-width="170"
              prop="grade"
              name="grade"
            >
              <t-input
                v-model.trim="formData.grade"
                maxlength="60"
                clearable
                borderless
                :disabled="authority([5])" 
                
                align="right"
                placeholder="请输入年级"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="班级："
              label-width="170"
              prop="calss"
              name="calss"
            >
              <t-input
                v-model.trim="formData.calss"
                maxlength="60"
                clearable
                borderless
                :disabled="authority([5])" 
                
                align="right"
                placeholder="请输入班级"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label-width="170"
              prop="subject"
              name="subject"
              requiredMark
            >
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell title="科目：" arrow @click="popupShow('subject')">
                    <template #note>
                      <span :class="formData.subject ? 't_cell' : ''">{{
                        formData.subject || "请输入科目"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
                <DataSelector
                  :value="visible.subject"
                  @close="visiblehide"
                  :selekey="'course'"
                  @change="changeSele('subject', 'course_name', $event)"
                ></DataSelector>
              </div>
              <!-- 数据搜索 -->
            </t-form-item>
            <t-form-item
              label="课程："
              label-width="170"
              prop="course"
              name="course"
            >
              <t-input
                v-model.trim="formData.course"
                maxlength="60"
                clearable
                borderless
                :disabled="authority([5])" 
                
                align="right"
                placeholder="请输入课程"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="授课模式："
              label-width="170"
              prop="teaching_mode"
              name="teaching_mode"
            >
              <t-input
                v-model.trim="formData.teaching_mode"
                maxlength="60"
                clearable
                borderless
                :disabled="authority([5])"  
                align="right"
                placeholder="请输入授课模式"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="课节次名称："
              label-width="170"
              prop="class_session_name"
              name="class_session_name"
            >
              <t-input
                v-model.trim="formData.class_session_name"
                maxlength="60"
                clearable
                borderless
                :disabled="authority([5])"  
                align="right"
                placeholder="请输入课节次名称"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item label-width="170" prop="calss_time" name="calss_time">
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="上课日期："
                    :note="formData.calss_time || '上课日期：'"
                    arrow
                    @click="popupShow('calss_time')"
                  >
                    <template #note>
                      <span :class="formData.calss_time ? 't_cell' : ''">{{
                        formData.calss_time || "上课日期："
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-popup
                v-model="visible.calss_time"
                placement="bottom"
                :close-on-overlay-click="false"
                :show-overlay="false"
              >
                <t-date-time-picker
                  @cancel="visiblehide"
                  @confirm="receptionData('calss_time', $event)"
                  :value="formData.calss_time||dayjs().format('YYYY-MM-DD')"
                  :mode="['date']"
                  title="上课日期"
                  format="YYYY-MM-DD"
                />
              </t-popup>
            </t-form-item>
            <t-form-item
              label-width="170"
              prop="calss_time_slot"
              name="calss_time_slot"
            >
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="上课时间："
                    :note="formData.calss_time_slot || '请输入上课时间'"
                    arrow
                    @click="popupShow('calss_time_slot')"
                  >
                    <template #note>
                      <span :class="formData.calss_time_slot ? 't_cell' : ''">{{
                        formData.calss_time_slot || "请输入上课时间"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-popup
                v-model="visible.calss_time_slot"
                placement="bottom"
                :close-on-overlay-click="false"
                :show-overlay="false"
              >
                <t-date-time-picker
                  @cancel="visiblehide"
                  @confirm="receptionData('calss_time_slot', $event)"
                  :value="formData.calss_time_slot"
                  :mode="[null, 'minute']"
                  title="选择上课时间"
                  format="hh:mm:ss"
                />
              </t-popup>
            </t-form-item>
            <t-form-item  
              label-width="170"
              prop="calss_time_last"
              name="calss_time_last"
            >
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="下课时间："
                    :note="formData.calss_time_last || '请选择下课时间'"
                    arrow
                    @click="popupShow('calss_time_last')"
                  >
                    <template #note>
                      <span :class="formData.calss_time_last ? 't_cell' : ''">{{
                        formData.calss_time_last || "请选择下课时间"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-popup
                v-model="visible.calss_time_last"
                placement="bottom"
                :close-on-overlay-click="false"
                :show-overlay="false"
              >
                <t-date-time-picker
                  @cancel="visiblehide"
                  @confirm="receptionData('calss_time_last', $event)"
                  :value="formData.calss_time_last"
                  :mode="[null, 'minute']"
                  title="选择下课时间"
                  format="hh:mm:ss"
                />
              </t-popup>
            </t-form-item>
            <t-form-item
              label="上课志愿者："
              label-width="170"
              prop="volunteer_name"
              name="volunteer_name"
            >
              <t-input
                v-model.trim="formData.volunteer_name"
                maxlength="60"
                clearable
                borderless
                :disabled="authority([5])"  
                align="right"
                placeholder="请输入上课志愿者"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="志愿者归属小队："
              label-width="200"
              prop="team"
              name="team"
            >
              <t-input
                v-model.trim="formData.team"
                maxlength="60"
                clearable
                borderless
                :disabled="authority([5])"  
                align="right"
                placeholder="请输入志愿者归属小队"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="在地教师："
              label-width="200"
              prop="local_teachers"
              name="local_teachers"
            >
              <t-input
                v-model.trim="formData.local_teachers"
                maxlength="60"
                clearable
                borderless
                :disabled="authority([5])"  
                align="right"
                placeholder="请输入在地教师"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="课程会议链接："
              label-width="200"
              prop="link"
              name="link"
              v-if="authority([3, 5])"
            >
              <t-input
                v-model.trim="formData.link"
                maxlength="60"
                clearable 
                borderless
                
                align="right"
                placeholder="请输入课程会议链接"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="课程会议号："
              label-width="200"
              prop="code"
              name="code"
              v-if="authority([3, 5])"
            >
              <t-input
                v-model.trim="formData.code"
                maxlength="60"
                clearable
                borderless 
                align="right"
                placeholder="请输入课程会议号"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label-width="170"
              prop="zxguser_name"
              name="zxguser_name" 
            >
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="督课人员："
                    arrow
                    @click="popupShow('zxguser_name')"
                  >
                    <template #note>
                      <span :class="formData.zxguser_name ? 't_cell' : ''">{{
                        formData.zxguser_name || "选择督课人员"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
                <DataSelector
                  :value="visible.zxguser_name"
                  @close="visiblehide"
                  :selekey="'zxgzuser'"
                  @change="
                    changeSele('zxguser_name', 'username', $event, 'zxguser_id')
                  "
                ></DataSelector>
              </div>
            </t-form-item>


            <!-- 创造前 --> 
          </t-form>
        </div>

        <div
          class="t-form__footer"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
          "
        >
          <t-button
            size="large"
            theme="primary"
            variant="text"
            @click="showPopup = false"
            >关闭</t-button
          >
          <!-- <el-button type="success" @click="showPopup = false" plain>关闭</el-button> -->
          <div style="display: flex">
            <t-button
              style="margin: 0 10px"
              theme="primary"
              :disabled="loading"
              @click="submitForm()"
            >
              {{ endtext || "新增" }}
            </t-button>
            <!-- <el-button type="success"  @click="submitForm()">{{ endtext || "新增" }}</el-button> -->
          </div>
        </div>
      </div>
    </t-popup>
  </div>
</template>
      
      <script>
import dayjs from "dayjs";
import { getStorage } from "@/utils/util";
import DataSelector from "@/components/h5com/dataSelector.vue";
import { Message } from "tdesign-mobile-vue";

export default {
  components: {
    DataSelector,
  },
  props: {
    status: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      endtext: "", //编辑状态
      userInfo: "", //权限数据
      showPopup: false,
      visible: {},
      dayjs: dayjs,
      formData: {},
      loading: false,
      couList: [],
      userIdList: [],
      weeklist: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      isStatusList: [
        { value: "1", label: "未排课" },
        { value: "2", label: "已排课" },
      ],
      verifyStatus: [
        { value: "1", label: "待核校" },
        { value: "2", label: "已核校" },
        { value: "3", label: "驳回" },
        { value: "4", label: "已通过" },
        { value: "5", label: "问题校" },
      ],
      linePlanList: [
        {
          value: "1",
          label: "是",
          id: "1",
        },
        {
          value: "2",
          label: "否",
          id: "2",
        },
      ],
      rules: {
        team:[
          { required: true, message: "请输入志愿者归属小队", trigger: "blur" },
        ],
        province: [
          { required: true, message: "请输入省名称", trigger: "blur" },
        ],
        municipality: [
          { required: true, message: "请输入市名称", trigger: "blur" },
        ],
        region: [{ required: true, message: "请输入区名称", trigger: "blur" }],
        institution: [
          { required: true, message: "请输入所属机构名称", trigger: "blur" },
        ],
        school_name: [
          { required: true, message: "请输入学校名称", trigger: "blur" },
        ],
        school_id: [
          { required: true, message: "请输入学校ID", trigger: "blur" },
        ],
        grade: [{ required: true, message: "请输入年级", trigger: "blur" }],
        calss: [{ required: true, message: "请输入班级", trigger: "blur" }],
        subject: [{ required: true, message: "请输入科目", trigger: "blur" }],
        course: [{ required: true, message: "请输入课程", trigger: "blur" }],
        class_session_name: [
          { required: true, message: "请输入课节次名称", trigger: "blur" },
        ],
        calss_time: [
          { required: true, message: " 请输入上课时间", trigger: "change" },
        ],
        calss_time_last: [
          { required: true, message: "请输入下课日期", trigger: "change" },
        ],
        calss_time_slot: [
          { required: true, message: "请输入下课时间", trigger: "change" },
        ],
        volunteer_name: [
          { required: true, message: "请输入上课志愿者姓名", trigger: "blur" },
        ],
        volunteer_lv: [
          { required: true, message: "请输入志愿者考勤", trigger: "blur" },
        ],
        local_teachers: [
          { required: true, message: "请输入在地教师", trigger: "blur" },
        ],
        local_teachers_lv: [
          { required: true, message: "请输入在地教师考勤", trigger: "blur" },
        ],
        class_session_status: [
          { required: true, message: "请选择课节状态", trigger: "change" },
        ],
        abnormal_cause: [
          { required: true, message: "请输入异常原因", trigger: "blur" },
        ],
        link: [
          { required: true, message: "请输入课程会议链接", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入课程会议号", trigger: "blur" },
        ],
        staff_name: [
          { required: true, message: "请输入督课人员姓名", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择正常上课状态", trigger: "change" },
        ],
        volunteer_stauts: [
          {
            required: true,
            message: "请选择志愿者正常入会状态",
            trigger: "change",
          },
        ],
        zdquser_name: [
          {
            required: true,
            message: "请选择在地区域负责人",
            trigger: "change",
          },
        ],
        user_name: [
          { required: true, message: "请选择在地工作人员", trigger: "change" },
        ],
        duser_name: [
          { required: true, message: "请选择代课人员", trigger: "change" },
        ],
        zxguser_name: [
          { required: true, message: "请选择督课人员", trigger: "change" },
        ],
        is_pause: [
          { required: true, message: "请选择是否暂停", trigger: "change" },
        ],
        pause_remarks: [
          { required: true, message: "请输入暂停原因", trigger: "blur" },
        ],
        teaching_mode: [
          { required: true, message: "请输入授课模式", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限
  },
  methods: {
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    }, 
 
    submitForm() {
      // console.log(this.$refs.rulesForm, "--------this.$refs.rulesForm");

      this.$refs["rulesForm"].validate().then((valid) => {
        if (valid === true) {
          console.log("表单验证成功");
          //   数据新增
          //   this.showPopup = false;
          //   this.$emit('submitForm', this.formData);
          if(!this.formData.is_pause) this.formData.is_pause=1;
          
         if(this.formData.id) this.$emit("endForm", this.formData);
         else  this.$emit("addForm", this.formData);
        } else {
            Message.error("请输入必填项");
          console.log("表单验证失败");
        }
      });
      //  this.$refs.rulesForm.validate(); // 重置表单并清除验证状态
      // this.showPopup=false;
      // this.$emit('submitForm',this.formData)
    },
    changeSele(k, name, e, k2) {
      // k是需要覆盖的数据 name是e下面的数据覆盖到k k2是获取的id
      this.formData[k] = e[name];
      if (e.userid) {
        this.formData[k2] = e.id;
      }
    },
    // showtitles 显示标题
    showtitles(arr, id) {
      let titles = "";
      if (!id) return;
      let arres= arr.filter((item) => item.value == id);
      
      if (arres.length) titles = arres[0].label;

      return titles;
    },
    receptionData(key, value) {
      // 接受弹出层的数据给 formData 只接受但数据
      if (typeof value === "object" && value.value) {
        this.formData[key] = value.value;
      }

      if (typeof value == "string") this.formData[key] = value;

      this.visiblehide();
    },
    // 遮罩显示点击
    popupShow(value) {
      this.visible = {};
      console.log(value, "---------value");
      this.visible[value] = true;
    },
    closehide() {
      // 关闭清空
      this.formData = {};
      this.endtext = "";
      this.visiblehide();
    },
    visiblehide(value) {
      console.log("执行", value);
      // 遮罩层关闭
      this.visible = {};
    },
    async courseMethod(query) {
      if (!query) {
        this.couList = [];
        return;
      }

      this.loading = true;
      try {
        // 模拟API调用，实际应替换为真实接口
        const courseData = JSON.parse(getStorage("courseObj"))?.course || [];
        this.couList = courseData.filter((item) =>
          item.course_name.toLowerCase().includes(query.toLowerCase())
        );
      } finally {
        this.loading = false;
      }
    },
    async userMethod(query) {
      if (!query) {
        this.userIdList = [];
        return;
      }

      this.loading = true;
      try {
        const userData = JSON.parse(getStorage("courseObj"))?.zdguser || [];
        this.userIdList = userData.filter((item) =>
          item.username.toLowerCase().includes(query.toLowerCase())
        );
      } finally {
        this.loading = false;
      }
    },
    handleStatusChange(value) {
      this.$emit("status-change", value);
    },
    reset() {
      // 数据清空
      this.formData = {};
      this.showPopup = false;

      this.$emit("resetscreem");
    },
   
    onSearch() {
      this.showPopup = false;
      this.$emit("search", this.formData);
    },
    editupdata(row, text) {
      // 编辑 进入编辑
      console.log("text", text);
      this.endtext = text || "编辑";
      this.showPopup = true;
      this.formData = { ...row };
    },
  },
};
</script>
      
      <style scoped>
.popup-content {
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  width: 90vw;
  max-width: 500px;
  box-sizing: border-box;
}

.popup-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.empty-tips {
  padding: 8px 0;
  color: var(--td-gray-color-6);
  text-align: center;
}

@media (max-width: 640px) {
  .popup-content {
    width: 100%;
    overflow-y: auto;
  }

  :deep(.t-form-item__label) {
    font-size: 14px;
  }

  :deep(.t-picker__toolbar) {
    padding: 8px 12px;
  }
}
</style>
      
      <style lang="scss" scoped>
.custom-input {
  :deep(.t-t-input--default) {
    font-size: 20px; /* 调整输入框 placeholder 字体大小 */
  }
}
</style>
      
      <style>
.t-form__label--right {
  font-size: 14px;
}
.t-cell__title-text {
  font-size: 14px;
}
.t-form__label--left {
  font-size: 14px; /* 调整左侧标签字体大小 */
}

.t-form__label {
  padding: 0;
}

.t-input--default {
  font-size: 13px;
}

.t-input--default::placeholder {
  color: gray; /* 设置颜色 */
  font-size: 14px !important; /* 设置字体大小 */
  border: none;
  /* 其他样式，例如字体系列 */
}

.t-form__item {
  padding-left: 10px;
  padding-right: 10px;
}

.t-input--default {
  font-size: 14px; /* 调整输入框字体大小 */
  border-bottom: none !important; /* 移除默认下划线 */
}
.t_cell {
  color: #000;
  font-size: 14px;
}
.t-cell__note {
  font-size: 14px;
}
.proptitle {
  font-size: 16px;
  font-weight: 600;
  padding: 10px 0;
}
.form-content {
  min-height: 50vh;
  max-height: 70vh;
  overflow-y: auto;
}
</style>